<script setup>
import { ref } from 'vue';
import { GetSettingAPI, PutSettingAPI } from '@/api/studyData.js';
const sum = ref(40); // 每日单词数量
const listen = ref('us') // 英美切换

// 获取学习设定
const getSetting = async () => {
  const res = await GetSettingAPI()
  sum.value = res.daily_amount
  listen.value = res.default_phonetic
  // console.log(sum.value, listen.value);
}
getSetting()

// 设置学习设定
const putSetting = async () => {
  await PutSettingAPI(sum.value, listen.value)
  ElMessage.success('学习设置更新成功')
}
</script>

<template>
  <div class="parent">
    <div class="box">
      <!-- 进度条 -->
      <div class="slider-demo-block">
        <span class="demonstration1">每日单词：</span>
        <el-slider v-model="sum" :step="10" style="flex: 1;" />
        <span class="demonstration2">{{ sum }}个单词</span>
      </div>
      <!-- 提示 -->
      <div class="tishi">设置每日背诵的单词数量，当达到指定数量后会自动打卡</div>

      <div style="padding-top: 20px;"></div>
      <!-- 默认发音 -->
      <span class="demonstration1">默认发音:</span>
      <el-switch v-model="listen" active-color="#5BBE9E" inactive-value="us" active-value="uk">
        <template #active-action>
          <span class="custom-active-action">英</span>
        </template>

        <template #inactive-action>
          <span class="custom-inactive-action">美</span>
        </template>
      </el-switch>
      <div style="display: flex; justify-content: center; margin-top: 20px;">
        <el-button type="success" size="large" style="background: #5BBE9E;" @click="putSetting">更新设置</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.parent {
  width: 100%;
  height: 90vh;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.box {
  grid-area: 1 / 3 / 5 / 9;
  padding: 20px;

  .slider-demo-block {
    display: flex;
    align-items: center;

    .demonstration1 {
      padding-right: 10px;
      font-weight: bold;
    }

    .demonstration2 {
      padding-left: 10px;
    }
  }

  .tishi {
    margin-top: 20px;
    width: 100%;
    min-height: 40px;
    background: #F4F4F5;
    padding-left: 5%;
    line-height: 40px;
    font-size: 13px;
    color: #909399;
  }

  .demonstration1 {
    padding-right: 10px;
    font-weight: bold;
  }
}
</style>
